<template>
	<view class="main-class" >
		<tn-sticky> 
			<view class="tn-flex header-class" >
				<view class="status_bar" style="height: var(--status-bar-height); width: 100%; "></view>
				<view class="">
					<view class="tn-pl-lg tn-pb-sm tn-text-2xl tn-text-bold tn-white_text">{{title}}</view>
					<view class="tn-mb-sm tn-flex items-end justify-center search-row-class ">
						<tn-notice-bar :data="noticeData" direction="horizontal"  :loop="false" left-icon="sound" left-icon-color="tn-grey" right-icon="right-double" right-icon-color="tn-red" auto-hidden 
						 style="background-color: transparent;" @click="toNavigateNotice" />
						<!-- <tn-icon name="fold" size="70" color="#FFFFFF" class="icon-class" />
						<tn-search-box
							v-model="searchValue"
							@input="searchInputEvent"
							@search="searchBtnClickEvent"
							size="sm"
							placeholder="搜索关键词"
							placeholder-icon="search"
							border-color="#FFFFFF"
							text-color="#FFFFFF"
							placeholder-color="#FFFFFF"
							class="search-class"
							:search-button="false"
						/>
						<tn-icon name="comment" size="70"  color="#FFFFFF" class="icon-class"/> -->
					</view>
				</view>
				
			</view>
		</tn-sticky>
		<view class="swiper-class">
			<tn-swiper
			    v-model="currentSwiperIndex"
			    :data="swiperData"
			    width="100vw"
			    height="20vh"
			  >
			    <template #default="{ data }">
			      <view class="swiper-data">
			        <image class="image" :src="data" mode="aspectFill" />
			      </view>
			    </template>
			  </tn-swiper>
		</view>
		
		
		<view class="scroll-list-class tn-p-sm">
			<tn-scroll-list :indicator="false">
			    <view class="item-container">
			      <view
			        v-for="(item,index) in saleDeptData"
			        :key="index"
			        class="scroll-item tn-flex-center tn-flex-column"
					@click="saleDeptClick(item.saledeptid)"
			      >
			        <image class="empty tn-grey-light_bg" :src="item.imgUrl"></image>
			        <view class="title">{{item.saleDeptName}}</view>
			      </view>
			    </view>
			  </tn-scroll-list>
		</view>
		<hr/>
		
		<tn-title title="促销方案" mode="vLine" assist-color="#61e6be" class="tn-p-sm tn-text-bold" color="tn-color-black" />
		<view class="tn-p-sm tn-shadow-md tn-mb-sm tn-mr-sm tn-ml-sm" v-for="(item,index) in promData">
			<tn-list-item  height="60rpx" bg-color="tn-color-white" text-color="tn-grey"  class="tn-p-sm" right-icon="right" :bottom-border="true" :bottom-border-indent="true" @click="promClick(item)"> {{item.promName}} </tn-list-item>
		</view>
		<hr/>
		<tn-title title="推荐品种" mode="vLine" assist-color="#61e6be" class="tn-p-sm tn-text-bold" color="tn-color-black" />
		<view class="tn-flex cards-class tn-flex-wrap justify-between tn-m-sm">
			<view class="card-class tn-shadow-md tn-p-sm tn-mb-sm" v-for="(item,index) in recommendData" >
				<image class="card-image-class" :src="item.imgUrl" @click="saleDeptImageClick(item)"></image>
				<view class="no-wrap tn-text-bold tn-text-sm" @click="saleDeptImageClick(item)">{{item.goodsName}}</view>
				<view class="no-wrap tn-text-sm tn-gray_text" @click="saleDeptImageClick(item)">{{item.goodsspec}}</view>
				<view class="no-wrap tn-text-sm tn-gray_text" @click="saleDeptImageClick(item)">{{item.manufacturer}}</view>
				<view class="no-wrap tn-text-sm tn-gray_text" @click="saleDeptImageClick(item)">{{item.valdate}}</view>
				<view class="tn-flex justify-between" @click="saleDeptImageClick(item)">
					<view class="tn-red_text tn-text-bold tn-text-sm">￥{{item.retailP}}</view> 
					<view class="no-wrap tn-text-sm tn-gray_text">{{item.goodsSpec}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref,reactive,onMounted  } from "vue"
	import { postCall  } from '@/api/index.js'
	
	const headerClass = ref('');
	const swiperData = reactive([]);
	const saleDeptData = reactive([]);
	const promData = reactive([]);
	const recommendData = reactive([]);
	const procName = "PROC_APP_DO_HOME";
	onMounted(() => {
		console.log(process.env.UNI_PLATFORM)
		// 在页面展示时将页面滚动到顶部
	    uni.pageScrollTo({
			scrollTop: 0,
			duration: 0
		});
		
		if (process.env.UNI_PLATFORM === 'app-plus' || process.env.UNI_PLATFORM === 'h5' || process.env.UNI_PLATFORM==='app') {
			headerClass.value = 'header-class-app'; // 应用App平台和H5的样式
		} else if (process.env.UNI_PLATFORM === 'mp-weixin') {
			headerClass.value = 'header-class-wechat'; // 应用微信小程序的样式
		}	
		doGetSwiper();
		doGetSaleDept();
		doGetProm();
		doGetRecommend();
		doGetTitle();
		doGetNotice();
	});
	
	let noticeData = reactive([]);
	
	let doGetNotice = () =>{
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_NOTICE";
		params["P_ACTION"] = "TITLEARR";
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					for(let i=0;i<res.data.DATASET.length;i++){
						noticeData.push(res.data.DATASET[i].title);
					}
				}
			}
			
		})
	};
	
	let pageInfo = {
		P_PAGE : 1,
		P_PAGESIZE : 20
	}
	
	let saleDeptClick = (val) =>{
		uni.setStorageSync("SALEDEPT",val);
		uni.setStorageSync("index",1);
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
	
	let saleDeptImageClick = (val) =>{
		uni.setStorageSync("SALEDEPT",val.saledeptid);
		uni.setStorageSync("index",1);
		uni.setStorageSync("GOODS",val.goodsid);
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
	
	let toNavigateNotice = ()=>{
		uni.navigateTo({
			url: '/pages/notice/notice'
		})
	}
	
	let doGetSwiper = () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "SWIPER";
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					for(let i=0;i<res.data.DATASET.length;i++){
						swiperData.push(res.data.DATASET[i].imgUrl);
					}
				}
			}
			
		})
	};
	let doGetSaleDept = () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "SALEDEPT";
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					Object.assign(saleDeptData,res.data.DATASET)
				}
			}
			
		})
	}
	let promClick = (val) =>{
		
		uni.setStorageSync("PROM",val);
		if(val.istj=='Y'){
			uni.navigateTo({
				url: '/pages/home/prom_tj'
			})
		}else{
			uni.navigateTo({
				url: '/pages/home/prom'
			})
		}
		
	}
	let doGetProm = () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "PROMOTION";
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					Object.assign(promData,res.data.DATASET);
				}
			}
			
		})
	}

	let doGetRecommend = () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "RECOMMEND";
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					Object.assign(recommendData,res.data.DATASET)
				}
			}
			
		})
	}
	
	const title = ref('');
	let doGetTitle = () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "TITLE";
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					title.value = res.data.DATASET[0].title;
				}
			}
			
		})
	}
	
	const searchValue = ref("")
	const currentSwiperIndex = ref(0)
	const searchInputEvent = () =>{
		
	}
	const searchBtnClickEvent = () =>{
		
	}

	let onSlide = () =>{
		console.log(11111111111111)
		uni.navigateBack();
	}
	
	
</script>

<style scoped>

.header-class-app{
	height: 11vh;

}	
.header-class-wechat{
	height: 17vh;
}	
.header-class{
	height: 17vh;
	flex-direction: column;
	justify-content: space-between;
}
.title-class{
	color:  #FFFFFF;
}	

/* .status_bar{
	align-self: flex-start;
}

.search-row-class{
	 align-self: flex-end;
} */	
.search-class{
	width: 70vw;
}
.icon-class{
	width: 15vw;
}
.swiper-class{
	width: 100vw;
	height: 20vh;
}
.image-class{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.swiper-container {
	width: 100vw;
	height: 20vh;	
}  
.swiper-data {
    width: 100vw;
    height: 20vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.image {
	
	width: 100vw; /* 图片最大宽度为容器宽度 */
	height: 100%; /* 图片最大高度为容器高度 */

}

.item-container {
	position: relative;
	width: fit-content;
	display: flex;
	flex-wrap: nowrap;
}
.scroll-item {
    flex-grow: 1;
    flex-shrink: 0;
    margin: 0rpx 20rpx;
}
.empty {
  width: 135rpx;
  height: 135rpx;
  border-radius: 15rpx;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background: #FFFFFF;
}

.title {
  margin-top: 10rpx;
}
.scroll-list-class{
	margin-top: 10px;
	margin-bottom: 10px;
}
.card-class{
	width: 45vw;
}
.card-image-class{
	width: 100%;
	height: 15vh;
}
.notice-class{
	 background-color: transparent;
}
</style>
